<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set> 
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Tables - Ace Admin</title>
	
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>

	<script type="text/javascript">
	$(function(){
		$('.mangee-subject-student-btn').click(function(){
			var student = $(this).parents("td").siblings("td").eq(0).text();		
			var userId = $(this).parents("td").siblings("td").eq(0).text();
			
			//弹出科目模态框
			$.ajax({
				type:'POST',
				url:'${contextPath}/teacher/getAllSubject',
				data:{
					userId:userId
				},
				dataType:"json",
				success:function(data){
					var htmlString = '';
					var selectedSubject = data.selectedSubject;
					var testedSubject = data.testedSubject;
					//alert(data.allUser.length);
					//得到所有这个科目关联的学生
					for(var i = 0; i<data.allSubject.length; i++){
						var subject = data.allSubject[i];
						var checked = checkSelectedSubject(selectedSubject, subject.subId) ? ' checked="checked" ' : '';
						var tested = checkTestedSubject(testedSubject, subject.subId) ? '已参考':'';
						var disabled = "";
						var tested2 = "";
						if(tested == '已参考'){
							disabled = "disabled";
							tested2 = "(已参考)";
						
						}
						htmlString += '<div class="checkbox">';
						htmlString += '		<label>';
						htmlString += '			<input name="subjectStudents" class="ace ace-checkbox-2"  type="checkbox" value="'
												+ subject.subId  + '" ' + checked + ' ' + disabled +  '/>';
						htmlString += '			<span class="lbl">' + subject.name + '</span>' + '&nbsp;&nbsp;<span style="color:red">' + tested2 +'</span>';
						htmlString += '		</label>';
						htmlString += '</div>';
					}
					//把所有学生加入弹出框 subjectStudentModal 里面的内容去，即subjectStudentContext里面
					$('#subjectStudentContext').html(htmlString);
					$('#subjectId').val(userId);
				}
			});
			
			var checkSelectedSubject = function(selectedSubject,subId){
				var flag = false;				
				$.each(selectedSubject,function(index,item){
					if(item == subId){
						 flag = true;
					}
				});
				return flag;
			}
			
			var checkTestedSubject = function(testedSubject,subId){
				var flag = false;				
				$.each(testedSubject,function(index,item){
					if(item == subId){
						 flag = true;
					}
				});
				return flag;
			}
			
			$('#modalStudentName').text(student);
			$('#subjectStudentModal').modal('show');
		});
		
		
		//修改科目的勾选后，点击保存按钮
		$('#subjectStudentSaveBtn').on('click',function(){
			var subjectStudents = [];
			//获取所有当前已经勾选的学生的学号
			for(var i = 0; i < $('input[name="subjectStudents"]:checked').length; i++){
				subjectStudents[i] = $($('input[name="subjectStudents"]:checked')[i]).val();
			}
			$.ajax({
				type:'POST',
				url:'${contextPath}/teacher/saveStudentsSubject',
				data:{
					subjectStudents:subjectStudents,
					userId:$('#subjectId').val()
				},
				dataType:"json",
				success:function(data){
					//判断成功与否
					//前台代码就这样
					if(data.success){
						alert('成功');
						$('#subjectStudentModal').modal('hide');
						window.location.reload();
					}else{
						alert('失败');
					}
				}
			});
		});
		
		
	});
	
	</script>
	
</head>
<body class="no-skin">
	<!-- /section:settings.box -->
	<div class="page-content-area">
		<a class="btn btn-primary"><i class="ace-icon fa fa-pencil ">&nbsp;&nbsp;学生参考科目</i></a>
		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">
						<table id="sample-table-1" class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>学号</th>
									<th>学生</th>
									<th>已关联科目</th>
									<th>操作</th>
								</tr>
							</thead>

							<tbody>
							<c:forEach items="${SubjectByUserAndUser }" var="student">
								<tr>
									<td>${student.id }</td>
									<td>${student.name }</td>
									<td>
										<select>
											<c:forEach items="${student.subjectList }" var="sub">
												<option>${sub.name }</option>
											</c:forEach>
										</select>
									</td>
									<td><a title="管理科目学生" class="btn btn-primary btn-xs  mangee-subject-student-btn"><i class="ace-icon fa fa-user"></i></a></td>															
								</tr>
							</c:forEach>

							</table>
						</div>
					</div>
				</div>
				
				<!-- 管理学生科目模态框 -->
				<div class="modal fade" id="subjectStudentModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="showTestModalLabel">
									学生：<label id="modalStudentName"></label>
								</h4>
							</div>
							<div class="modal-body">
								<input type="hidden" id="subjectId" />
								<div id="subjectStudentContext" class="control-group">
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button id="subjectStudentSaveBtn" type="button" class="btn btn-primary" >
									保存
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				
				<div id="modal-table" class="modal fade" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header no-padding">
								<div class="table-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										<span class="white">&times;</span>
									</button>
									Results for "Latest Registered Domains
								</div>
							</div>

							<div class="modal-body no-padding">
								<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
									<thead>
										<tr>
											<th>Domain</th>
											<th>Price</th>
											<th>Clicks</th>

											<th>
												<i class="ace-icon fa fa-clock-o bigger-110"></i>
												Update
											</th>
										</tr>
									</thead>

									<tbody>
										<tr>
											<td>
												<a href="#">ace.com</a>
											</td>
											<td>$45</td>
											<td>3,330</td>
											<td>Feb 12</td>
										</tr>

										<tr>
											<td>
												<a href="#">base.com</a>
											</td>
											<td>$35</td>
											<td>2,595</td>
											<td>Feb 18</td>
										</tr>

										<tr>
											<td>
												<a href="#">max.com</a>
											</td>
											<td>$60</td>
											<td>4,400</td>
											<td>Mar 11</td>
										</tr>

										<tr>
											<td>
												<a href="#">best.com</a>
											</td>
											<td>$75</td>
											<td>6,500</td>
											<td>Apr 03</td>
										</tr>

										<tr>
											<td>
												<a href="#">pro.com</a>
											</td>
											<td>$55</td>
											<td>4,250</td>
											<td>Jan 21</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="modal-footer no-margin-top">
								<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
									<i class="ace-icon fa fa-times"></i>
									Close
								</button>

								<ul class="pagination pull-right no-margin">
									<li class="prev disabled">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-left"></i>
										</a>
									</li>

									<li class="active">
										<a href="#">1</a>
									</li>

									<li>
										<a href="#">2</a>
									</li>

									<li>
										<a href="#">3</a>
									</li>

									<li class="next">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-right"></i>
										</a>
									</li>
								</ul>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- PAGE CONTENT ENDS -->
			</div><!-- /.col -->
		</div><!-- /.row -->
	</body>
</html>